<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
	<title>空气质量信息展示页</title>
	<link rel="stylesheet" href="static/css/layui.css">
</head>
<body>
<!-- 标题 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>空气质量检测信息库</legend>
</fieldset>

<!-- 下拉列表的表单 -->
<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">区域查询：</label>
      <div class="layui-input-inline">
        <select name="district" id="district">
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">查询</button>
    </div>
  </div>
</form>

<!-- 展示数据的表格 -->
<table class="layui-hide" id="airList" lay-filter="airList"></table>
 
<!-- 表格的头部工具 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-addition"></i></button>
    
  </div>
</script>
 
 <!-- 表格的行工具 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="static/layui.js"></script>
<script>
	layui.use(['table'],function(){
		var table = layui.table,
		$ = layui.$,
		form = layui.form;

		$.ajaxSetup({
          xhrFields: {
            withCredentials: true
          }
        });

		// 渲染table
		table.render({
			'elem': '#airList'
			,'url': 'http://localhost:8080/air/list'
			,'page': true
			,'toolbar': '#toolbarDemo'
			,'cols': [[
				{field: "id",title: "序号"},
				{field: "districtName",title: "区域"},
				{field: "monitorTime",title: "检测时间"},
				{field: "pm10",title: "pm10"},
				{field: "pm25",title: "pm2.5"},
				{field: "monitoringStation",title: "监测站"},
				{fixed: 'right', title:'操作', toolbar: '#barDemo'}
			]]
		});

		//发送Ajax请求获取区域数据，填充到district下拉列表
		$.ajax({
			url:"http://localhost:8080/district/findAll",
			data:null,
			type:"GET",
			dataType:"json",
			success:function(res){
				if(res.code == 0){
					var jsonArray = res.data;
					var content = "<option value='0'>请选择区域</option>";
					for (var i = 0; i < jsonArray.length; i++) {
						content += "<option value='"+jsonArray[i].id+"'>"+jsonArray[i].name+"</option>";
					}
					$("#district").html(content);
					form.render('select');
				}else{
					//凉凉~~
					layer.msg(res.msg);
				}
			},
			error:function(){
				layer.msg("凉凉~~");
			}
		});

		// 点击查询按钮，触发事件
		form.on('submit(search)', function(data){
			// 获取到区域id
		  var districtId = data.field.district;    
		  // 让table重载
		  table.reload('airList',{
		  	where: {
		  		districtId: districtId
		  	}
		  });
		  // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
		  return false; 
		});


		//触发头部工具栏事件
		table.on('toolbar(airList)', function(obj){
		  switch(obj.event){
		    case 'add':
		      	layer.open({
				  type: 2,
				  content: 'add.html',
				  title:'添加空气质量信息',
				  area:['600px', '400px']
				}); 
		    	break;
		    case 'bulkDelete':
                    // 批量删除
                    break;
		    default:
		    break;
		  };
		});
		

		//触发行工具栏事件
		table.on('tool(airList)', function(obj){
		  var data = obj.data;
		  switch(obj.event){
		    case 'edit':
		    	//将当前行的id，存储到sessionStorage中
		    	layui.sessionData('air',{
		    		key:'air',
		    		value:data
		    	});
		      	layer.open({
				  type: 2,
				  content: 'update.html',
				  title:'修改空气质量信息',
				  area:['600px', '450px'],
				  end:function(){
				  	var air = layui.sessionData('airEdit').airEdit;//拿到数据
				  	obj.update(air);//行更新数据
                    layui.sessionData('airEdit', {
                      key: 'airEdit'
                      , remove: true
                    });
				  }
				}); 
		    	break;
		    case 'del':
		        layer.confirm('真的删除行吗',function (index) {
                  let id = data.id;
                  $.getJSON(
                    "http://localhost:8080/air/delete",
                    {
                      id:id
                    },
                    function (res){
                      if(res.code == 0){
                        layer.msg("删除成功！");
                        obj.del();
                      }else {
                        layer.msg(res.msg);
                      }
                    }
                  )
                })
                break;
		    default:
		    break;
		  };
		});
	});
</script>
</body>
</html>